<template>
  <div class="main">
    <div class="main-table">
      <img src="@/assets/login/loginIcon.png" alt />
      <el-select v-model="value" placeholder="选择" @change="changeSelect">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="main-body">
      <div class="main-body-left">
        <i class="el-icon-s-fold"></i>
        <div class="main-body-left-column" v-for="(ele, i) in list" :key="i">
          <div
            class="choose"
            @click="parentClick(ele)"
            :class="[ele.isClick ? 'isClick' : '']"
          >
            <img :src="ele.icon" />
            <p>{{ ele.name }}</p>
            <i
              v-if="ele.children.length > 0"
              class="icon"
              :class="[
                ele.isChoose ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
              ]"
            ></i>
          </div>
          <div
            v-show="ele.isChoose"
            class="choose-children"
            :class="[_ele.isClick ? 'isClick' : '']"
            v-for="(_ele, _i) in ele['children']"
            :key="_i"
            @click="childClick(_ele)"
          >
            <p>{{ _ele.name }}</p>
          </div>
        </div>
      </div>
      <div class="main-body-right">
        <div class="main-body-right-top">
          <div
            class="top-template"
            v-for="(ele, i) in this.$store.getters.getTitle"
            :key="i"
          >
            <span @click="choosePage(ele)">{{ ele }}</span>
            <i class="el-icon-close" @click="dele(ele)"></i>
          </div>
        </div>
        <div class="main-body-right-bottom">
          <router-view />
          <!-- <Judge :title="chooseTitle" :list="list" /> -->
        </div>
      </div>
    </div>
    <Didlog :button="button" />
  </div>
</template>

<script>
import Judge from "./firstPage/judge";
import Didlog from "../components/dialog";
export default {
  data() {
    return {
      options: [
        {
          value: "admin",
          label: "admin",
        },
        {
          value: "修改密码",
          label: "修改密码",
        },
      ],
      value: "",
      list: [
        {
          name: "实时监控",
          icon: require("@/assets/main/time@2x.png"),
          children: [],
          isChoose: false,
          isClick: false,
        },
        {
          name: "应用管理",
          icon: require("@/assets/main/product@2x.png"),
          children: [
            { name: "业务管理", isClick: false, icon: "" },
            { name: "设备管理", isClick: false, icon: "" },
            { name: "车辆管理", isClick: false, icon: "" },
            { name: "司机管理", isClick: false, icon: "" },
          ],
          isChoose: false,
          isClick: false,
        },
        {
          name: "数据查询",
          icon: require("@/assets/main/dataQuery@2x.png"),
          children: [
            { name: "数据查询", isClick: false, icon: "" },
            { name: "业务报表3", isClick: false, icon: "" },
          ],
          isChoose: false,
          isClick: false,
        },
        {
          name: "控制面板",
          icon: require("@/assets/main/setting@2x.png"),
          children: [
            { name: "账户管理", isClick: false, icon: "" },
            { name: "角色管理", isClick: false, icon: "" },
            { name: "功能配置", isClick: false, icon: "" },
            { name: "管理日志", isClick: false, icon: "" },
          ],
          isChoose: false,
          isClick: false,
        },
      ],
      chooseTitle: "",
      button: {
        dialogVisible: false,
        confirm: () => {
          let next = this.button.myDialog.some((ele, index) => {
            if (ele.value == "") {
              this.$message({
                message: "请输入" + ele.title,
                offset: 300,
              });
              return true;
            }
          });
        },
        myDialogTitle: "修改密码",
        myDialog: [
          { title: "原始密码：", value: "", type: "input" },
          { title: "新密码：", value: "", type: "input" },
          { title: "确认密码：", value: "", type: "input" },
        ],
      },
    };
  },
  methods: {
    cancleIsClick() {
      this.list.filter((item, index) => {
        item.isClick = false;
        item.children.filter((_item, _index) => {
          _item.isClick = false;
        });
      });
    },
    childClick(ele) {
      this.cancleIsClick();
      ele.isClick = true;
      this.choosePage(ele.name);
      this.$store.commit("changeTitle", { type: true, title: ele.name });
    },
    parentClick(ele) {
      this.cancleIsClick();
      if (ele.children.length > 0) {
        ele.isChoose = !ele.isChoose;
      } else {
        ele.isClick = true;
        this.$store.commit("changeTitle", { type: true, title: ele.name });
        this.choosePage(ele.name);
      }
    },
    dele(title) {
      this.$store.commit("changeTitle", { type: false, title: title });
      if (this.$store.getters.getTitle.length > 0) {
        this.chooseTitle = this.$store.getters.getTitle[
          this.$store.getters.getTitle.length - 1
        ];
      } else {
        this.chooseTitle = "";
      }
      if(this.chooseTitle==''){
         this.$router.push('/');
      }
      if(this.$route.path.indexOf(this.chooseTitle)>-1){
        return;
      };
      
      
      if (this.$route.path.indexOf("second") > -1) {
        if(this.chooseTitle!=''){
           this.$router.push(`/first/${this.chooseTitle}`);
        }else{
          this.$router.push('/');
        }
      }else{
       if(this.chooseTitle!=''){
           this.$router.push(`/first/${this.chooseTitle}`);
        }else{
          this.$router.push('/');
        }
      }
    },
    choosePage(title) {
      let listPath = this.$route.path.split("/");
      if (this.chooseTitle == title || listPath[listPath.length - 1] == title)
        return;
      this.chooseTitle = title;
      if (title == "功能配置") {
        this.$router.push({
          path: `/first/${title}`,
          // params: { title: title, list: this.list },
          query: { title: title, list: this.list },
        });
      } else {
        this.$router.push({
          path: `/first/${title}`,
        });
      }
    },
    assginId(list, parintI) {
      let parentI = parintI ? parintI : "";
      for (let i = 0; i < list.length; i++) {
        list[i].id = parentI + i;
        if (list[i].children) {
          this.assginId(list[i].children, parentI + i);
        }
      }
    },
    changeSelect(msg) {
      if (msg == "修改密码") {
        console.log(msg);
        this.button.dialogVisible = true;
      }
    },
  },
  components: {
    Judge,
    Didlog,
  },

  mounted() {
    this.assginId(this.list);
  },
};
</script>

<style lang='scss' scoped>
.main {
  &-body {
    &-right {
      &-top {
        .top-template {
          i {
            cursor: pointer;
          }
          &::before {
            content: "";
            position: absolute;
            width: 90%;
            height: 2px;
            background: #0082de;
            bottom: 0;
          }
          span {
            margin: 0 0.1rem;
            font-size: 0.14rem;
          }
          cursor: pointer;
          display: inline-block;
          padding: 0.1rem;
          background: #fff;
          align-items: center;
          position: relative;
        }
        background: #f9f9f9;
        width: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        justify-content: start;
        text-align: left;
      }
      width: 85%;
      background: #f5f5f5;
    }
    &-left {
      .isClick {
        background: #214d79 !important;
      }
      .choose-children {
        p {
          &:hover {
            background: #214d79;
          }
          color: #d8efff;
          margin: 0.1rem 0;
          padding: 0.2rem 0;
          padding-left: 0.75rem;
          text-align: left;
        }
      }
      .el-icon-s-fold {
        font-size: 0.2rem;
        color: #fff;
        margin: 0.1rem 0;
      }
      &-column {
        .choose {
          &:hover {
            background: #214d79;
          }
          img {
            width: 0.18rem;
            height: 0.18rem;
            margin-right: 0.2rem;
            margin-left: 0.4rem;
          }
          p {
            margin-right: auto;
          }
          .icon {
            margin-right: 0.4rem;
            margin-top: 0.03rem;
          }
          color: #fff;
          display: flex;
          align-content: center;
          padding: 0.2rem 0;
          background: #26292c;
        }
      }
      width: 15%;
      min-height: 95vh;
      // max-width: 2.5rem;
      background: #26292c;
    }
    display: flex;
    // justify-content: space-between;
    min-height: 92%;
  }
  &-table {
    img {
      // width: 20%;
      height: 0.3rem;
    }
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #006ab4;
    padding: 0 0.16rem;
    height: 8%;
  }
  // height: 100vh;
}
</style>

<style lang="scss">
.main {
  .el-dialog__header {
    display: none !important;
  }
  .el-dialog__body {
    padding: 0;
  }
}
.main-table {
  .el-select {
    width: 10%;
    input {
      background: rgba($color: #fff, $alpha: 0);
      border: none;
    }
  }
}
</style>
